import QtQuick
import QtQuick.Controls

Item {
    id:extraLongProcessBack
    width: screenWidth
    height: screenHeight - 300

    Rectangle{      // 顶部 锯头切换部分
        anchors.horizontalCenter: extraLongProcessBack.horizontalCenter
        anchors.top: extraLongProcessBack.top
        width: extraLongProcessBack.width - 60
        height: extraLongProcessBack.height * 0.15
        radius: 5
        color: "#00CED1"
        border.width: 1
        border.color: "#000000"

        gradient:           // 渐变色属性
            Gradient{
                GradientStop{ position: 0.0 ; color: "#00BFFF"}
                GradientStop{ position: 0.2 ; color: "#87CEFA"}
                GradientStop{ position: 0.4 ; color: "#87CEEB"}
                GradientStop{ position: 0.6 ; color: "#B0E0E6"}
                GradientStop{ position: 0.8 ; color: "#F0FFFF"}
        }

        Rectangle{      // 左锯指示
            id:leftSaw
            width: 150
            height: 150
            radius: 150
            anchors.top: parent.top
            anchors.topMargin: 20
            anchors.left: parent.left
            anchors.leftMargin: 100
            border.width: 5
            border.color: "lightgray"
            color: currentState ? "red" : "white"

            property bool currentState : false

            MouseArea{
                anchors.fill: parent

                onClicked: {
                    console.log("左锯-选中")
                    leftSaw.currentState = true
                    bothSaw.currentState = false
                    rightSaw.currentState = false
                }
            }
        }

        Rectangle{      // 联动指示
            id:bothSaw
            width: 150
            height: 150
            radius: 150
            anchors.top: parent.top
            anchors.topMargin: 20
            anchors.horizontalCenter: parent.horizontalCenter
            border.width: 5
            border.color: "lightgray"
            color: currentState ? "red" : "white"

            property bool currentState : false

            MouseArea{
                anchors.fill: parent

                onClicked: {
                    console.log("联动-选中")
                    leftSaw.currentState = false
                    bothSaw.currentState = true
                    rightSaw.currentState = false
                }
            }
        }

        Rectangle{      // 右锯指示
            id:rightSaw
            width: 150
            height: 150
            radius: 150
            anchors.top: parent.top
            anchors.topMargin: 20
            anchors.right: parent.right
            anchors.rightMargin: 100
            border.width: 5
            border.color: "lightgray"
            color: currentState ? "red" : "white"

            property bool currentState : false

            MouseArea{
                anchors.fill: parent

                onClicked: {
                    console.log("右锯-选中")
                    leftSaw.currentState = false
                    bothSaw.currentState = false
                    rightSaw.currentState = true
                }
            }
        }

        Text{
            anchors.horizontalCenter: leftSaw.horizontalCenter
            anchors.top: leftSaw.bottom
            anchors.topMargin: 20
            font.pixelSize: 30
            font.bold: true
            text: qsTr("左锯")
        }

        Text{
            anchors.horizontalCenter: bothSaw.horizontalCenter
            anchors.top: bothSaw.bottom
            anchors.topMargin: 20
            font.pixelSize: 30
            font.bold: true
            text: qsTr("联动")
        }

        Text{
            anchors.horizontalCenter: rightSaw.horizontalCenter
            anchors.top: rightSaw.bottom
            anchors.topMargin: 20
            font.pixelSize: 30
            font.bold: true
            text: qsTr("右锯")
        }
    }


    Rectangle{      // 中下部 机头控制区
        anchors.horizontalCenter: extraLongProcessBack.horizontalCenter
        anchors.top: extraLongProcessBack.top
        anchors.topMargin: 280
        width: extraLongProcessBack.width - 60
        height: extraLongProcessBack.height * 0.3
        radius: 5
        // color: "#00CED1"
        border.width: 1
        border.color: "#000000"
        gradient:           // 渐变色属性
            Gradient{
                GradientStop{ position: 0.0 ; color: "#00BFFF"}
                GradientStop{ position: 0.2 ; color: "#87CEFA"}
                GradientStop{ position: 0.4 ; color: "#87CEEB"}
                GradientStop{ position: 0.6 ; color: "#B0E0E6"}
                GradientStop{ position: 0.8 ; color: "#F0FFFF"}
        }


        Text{           //  左机头标题
            id:leftMachineTitle
            anchors.top: parent.top
            anchors.topMargin: 20
            anchors.left: parent.left
            anchors.leftMargin: 200
            font.pixelSize: 50
            font.bold: true
            text: qsTr("左机头")
        }

        A_Button{
            id:leftSaw45_Btn
            anchors.horizontalCenter: leftMachineTitle.horizontalCenter
            anchors.top: leftMachineTitle.bottom
            anchors.topMargin: 100
            buttonWidth: 300
            buttonHeight: 80
            buttonContent: qsTr("45°")
            fontSize: 50
            contentColor: "white"
            buttonBorder: 3
            buttonBorderColor: "#d3d3d3"

            onButtonPressed: {
                leftSaw45_Btn.gradientColor = pressedColor
                leftSaw90_Btn.gradientColor = releasedColor

            }

        }


        A_Button{
            id:leftSaw90_Btn
            anchors.horizontalCenter: leftSaw45_Btn.horizontalCenter
            anchors.top: leftSaw45_Btn.bottom
            anchors.topMargin: 100
            buttonWidth: 300
            buttonHeight: 80
            buttonContent: qsTr("90°")
            fontSize: 50
            contentColor: "white"
            buttonBorder: 3
            buttonBorderColor: "#d3d3d3"

            onButtonPressed: {
                leftSaw90_Btn.gradientColor = pressedColor
                leftSaw45_Btn.gradientColor = releasedColor
            }
        }



        Rectangle{
            width: 3
            height: parent.height * 0.90
            anchors.top: parent.top
            anchors.topMargin: 20
            anchors.horizontalCenter: parent.horizontalCenter
            color: "black"
        }

        Text{           //  右机头标题
            id:rightMachineTitle
            anchors.top: parent.top
            anchors.topMargin: 20
            anchors.right: parent.right
            anchors.rightMargin: 200
            font.pixelSize: 50
            font.bold: true
            text: qsTr("右机头")
        }

        A_Button{
            id:rightSaw45_Btn
            anchors.horizontalCenter: rightMachineTitle.horizontalCenter
            anchors.top: rightMachineTitle.bottom
            anchors.topMargin: 100
            buttonWidth: 300
            buttonHeight: 80
            buttonContent: qsTr("45°")
            fontSize: 50
            contentColor: "white"
            buttonBorder: 3
            buttonBorderColor: "#d3d3d3"

            onButtonPressed: {
                rightSaw45_Btn.gradientColor = pressedColor
                rightSaw90_Btn.gradientColor = releasedColor
            }
        }

        A_Button{
            id:rightSaw90_Btn
            anchors.horizontalCenter: rightSaw45_Btn.horizontalCenter
            anchors.top: rightSaw45_Btn.bottom
            anchors.topMargin: 100
            buttonWidth: 300
            buttonHeight: 80
            buttonContent: qsTr("90°")
            fontSize: 50
            contentColor: "white"
            buttonBorder: 3
            buttonBorderColor: "#d3d3d3"

            onButtonPressed: {
                rightSaw45_Btn.gradientColor = releasedColor
                rightSaw90_Btn.gradientColor = pressedColor
            }
        }
    }


    Rectangle{      // 中下部 输入输出区
        anchors.horizontalCenter: extraLongProcessBack.horizontalCenter
        anchors.top: extraLongProcessBack.top
        anchors.topMargin: 800
        width: extraLongProcessBack.width - 60
        height: extraLongProcessBack.height * 0.33
        radius: 5
        // color: "#00CED1"
        border.width: 1
        border.color: "#000000"
        gradient:           // 渐变色属性
            Gradient{
                GradientStop{ position: 0.0 ; color: "#00BFFF"}
                GradientStop{ position: 0.2 ; color: "#87CEFA"}
                GradientStop{ position: 0.4 ; color: "#87CEEB"}
                GradientStop{ position: 0.6 ; color: "#B0E0E6"}
                GradientStop{ position: 0.8 ; color: "#F0FFFF"}
        }

        A_InputWindow{          // 超长料长 输入框
            id:extraLongInput
            anchors.top: parent.top
            anchors.topMargin: 20
            anchors.horizontalCenter: parent.horizontalCenter
            titleHeight: 80
            titleWidth: 200
            titleContent: qsTr("超长料长")
            titleMargin: 100
            backHeight: 80
            backWidth: 600
            showWidth: 300
            showHeight: 80

            onInputContentChanged: {
                console.log(inputContent)
            }

        }

        A_InputWindow{          // 料高设定 输入框
            id: materialHeightInput
            anchors.top: parent.top
            anchors.topMargin: 120
            anchors.horizontalCenter: parent.horizontalCenter
            titleHeight: 80
            titleWidth: 200
            titleContent: qsTr("料高设定")
            titleMargin: 100
            backHeight: 80
            backWidth: 600
            showWidth: 300
            showHeight: 80

            onInputContentChanged: {
                console.log(inputContent)
            }
        }

        A_InputWindow{          // 超长料长 输入框
            id: locationCompenstateInput
            anchors.top: parent.top
            anchors.topMargin: 220
            anchors.horizontalCenter: parent.horizontalCenter
            titleHeight: 80
            titleWidth: 200
            titleContent: qsTr("位置补偿")
            titleMargin: 100
            backHeight: 80
            backWidth: 600
            showWidth: 300
            showHeight: 80

            onInputContentChanged: {
                console.log(inputContent)
            }

        }

        A_ShowWindow{       // 当前位置 展示框
            id: currentlocation
            anchors.top: parent.top
            anchors.topMargin: 320
            anchors.horizontalCenter: parent.horizontalCenter
            titleHeight: 80
            titleWidth: 200
            titleContent: qsTr("当前位置")
            titleMargin: 100

            showContent: qsTr("测试123")
        }

        A_ShowWindow{       // 当前段数 展示框
            id: currentsections
            anchors.top: parent.top
            anchors.topMargin: 420
            anchors.horizontalCenter: parent.horizontalCenter
            titleHeight: 80
            titleWidth: 200
            titleContent: qsTr("当前段数")
            titleMargin: 100
            showContent: qsTr("测试123")
        }

    }

    Rectangle{      // 中下部 输入输出区
        anchors.horizontalCenter: extraLongProcessBack.horizontalCenter
        anchors.top: extraLongProcessBack.top
        anchors.topMargin: 1380
        width: extraLongProcessBack.width - 60
        height: extraLongProcessBack.height * 0.1
        radius: 5
        // color: "#00CED1"
        border.width: 1
        border.color: "#000000"
        gradient:           // 渐变色属性
            Gradient{
                GradientStop{ position: 0.0 ; color: "#00BFFF"}
                GradientStop{ position: 0.2 ; color: "#87CEFA"}
                GradientStop{ position: 0.4 ; color: "#87CEEB"}
                GradientStop{ position: 0.6 ; color: "#B0E0E6"}
                GradientStop{ position: 0.8 ; color: "#F0FFFF"}
        }

        A_Button{       // 复位按钮
            id: resetBtn
            anchors.left: parent.left
            anchors.leftMargin: 20
            anchors.verticalCenter: parent.verticalCenter
            buttonWidth: 170
            buttonHeight: 90
            buttonContent: qsTr("复 位")
            fontSize: 30
            contentColor: "white"
            buttonBorder: 2
            buttonBorderColor: "#d3d3d3"

            onButtonPressed: {
                resetBtn.gradientColor = pressedColor
            }

            onButtonReleased: {
                resetBtn.gradientColor = releasedColor
            }

        }

        A_Button{       // 开始定位按钮
            id: locationBtn
            anchors.left: parent.left
            anchors.leftMargin: 220
            anchors.verticalCenter: parent.verticalCenter
            buttonWidth: 170
            buttonHeight: 90
            buttonContent: qsTr("定 位")
            fontSize: 30
            contentColor: "white"
            buttonBorder: 2
            buttonBorderColor: "#d3d3d3"

            onButtonPressed: {
                locationBtn.gradientColor = pressedColor
            }

            onButtonReleased: {
                locationBtn.gradientColor = releasedColor
            }

        }




    }



}
